<template>
  <div>
    <router-view></router-view>
    <van-tabbar route  >
      <van-tabbar-item to="/home">
        <template #icon="props">
          <i
            class="iconfont"
            :class="[props.active ? 'icon-home-sel' : 'icon-home']"
          />
        </template>
        <span>首页</span>
      </van-tabbar-item>
      <van-tabbar-item to="/question">
        <template #icon="props">
          <i
            class="iconfont"
            :class="[props.active ? 'icon-qa-sel' : 'icon-qa']"
          />
        </template>
        <span>问答</span>
      </van-tabbar-item>
      <van-tabbar-item to="/video">
        <template #icon="props">
          <i
            class="iconfont"
            :class="[props.active ? 'icon-video-sel' : 'icon-video']"
          />
        </template>
        <span>视频</span>
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        <template #icon="props">
          <i
            class="iconfont"
            :class="[props.active ? 'icon-mine-sel' : 'icon-mine']"
          />
        </template>
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {}
</script>

<style scoped lang="less">
van-tabbar {
  background: #F7F8FA;
  position: static;
}
.iconfont{
  font-size: 16px !important
}
::v-deep .van-tabbar-item--active {
  color: #FC6627;
  background-color: #F7F8FA;
}
::v-deep .van-tabbar-item__icon {
  font-size: 20px;
}
::v-deep .van-tabbar-item__text {
  font-size: 10px;
}
</style>
